<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-300 font-medium;
            }
            .btn-secondary {
                @apply bg-white border border-gray-300 text-dark px-6 py-3 rounded-lg hover:bg-gray-50 transition-all duration-300 font-medium;
            }
            .form-input {
                @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .form-group {
                @apply mb-5;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .auth-card {
                @apply bg-white rounded-2xl shadow-lg p-8 w-full max-w-md;
            }
            .auth-header {
                @apply text-center mb-8;
            }
            .auth-title {
                @apply text-2xl font-bold mb-2;
            }
            .auth-subtitle {
                @apply text-gray-500 text-sm;
            }
            .password-strength {
                @apply h-1 mt-1 rounded-full bg-gray-200 overflow-hidden;
            }
            .password-strength-fill {
                @apply h-full bg-gray-300 transition-all duration-300;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row items-center justify-center gap-12">
            <!-- 左侧品牌展示 -->
            <div class="hidden md:block md:w-1/2">
                <div class="mb-8">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-white text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-primary">黄淮学院</h1>
                            <p class="text-sm text-info">校园活动管理系统</p>
                        </div>
                    </div>
                    <h2 class="text-3xl font-bold mb-4 text-dark">创建新账号</h2>
                    <p class="text-gray-600 mb-6 max-w-md">注册账号，开启您的校园活动之旅！参与丰富多彩的校园活动，拓展人脉，丰富课余生活。</p>
                    <div class="space-y-4">
                        <div class="flex items-center gap-3 bg-white p-3 rounded-lg shadow-sm">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                                <i class="fa fa-users text-purple-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">加入社区</h3>
                                <p class="text-xs text-gray-500">结识志同道合的同学</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 bg-white p-3 rounded-lg shadow-sm">
                            <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                                <i class="fa fa-star text-orange-500"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">展现自我</h3>
                                <p class="text-xs text-gray-500">参与活动获得积分奖励</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧注册表单 -->
            <div class="w-full md:w-1/2 flex justify-center">
                <div class="auth-card">
                    <div class="auth-header">
                        <h2 class="auth-title">用户注册</h2>
                        <p class="auth-subtitle">创建新账号，开始您的校园活动之旅</p>
                    </div>
                    
                    <form id="registerForm" class="space-y-5">
                        <div class="form-group">
                            <label for="username" class="form-label">学号/工号</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-id-card"></i>
                                </span>
                                <input type="text" id="username" class="form-input pl-10" placeholder="请输入学号或工号" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="fullname" class="form-label">姓名</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-user"></i>
                                </span>
                                <input type="text" id="fullname" class="form-input pl-10" placeholder="请输入您的真实姓名" required pattern="^[\u4e00-\u9fa5]+$">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone" class="form-label">手机号码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input type="tel" id="phone" class="form-input pl-10" placeholder="请输入手机号码" required maxlength="11" pattern="^1[3-9]\d{9}$" title="请输入正确的手机号码">
                            </div>
                        </div>
                        

                        
                        <div class="form-group">
                            <label for="password" class="form-label">设置密码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="password" class="form-input pl-10" placeholder="请设置密码" required>
                                <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                            <div class="password-strength">
                                <div id="passwordStrengthBar" class="password-strength-fill" style="width: 0%"></div>
                            </div>
                            <p id="passwordStrengthText" class="text-xs text-gray-500 mt-1">密码强度：未输入</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirmPassword" class="form-label">确认密码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                    <i class="fa fa-lock"></i>
                                </span>
                                <input type="password" id="confirmPassword" class="form-input pl-10" placeholder="请再次输入密码" required>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <input type="checkbox" id="agreeTerms" class="h-4 w-4 mt-1 text-primary border-gray-300 rounded focus:ring-primary" required>
                            <label for="agreeTerms" class="ml-2 block text-sm text-gray-700">
                                我已阅读并同意 <a href="terms.html" class="text-primary hover:underline">用户协议</a> 和 <a href="privacy.html" class="text-primary hover:underline">隐私政策</a>
                            </label>
                        </div>
                        
                        <button type="submit" class="btn-primary w-full">注册</button>
                    </form>
                    
                    <div class="text-center mt-6">
                        <p class="text-sm text-gray-600">
                            已有账号？ <a href="login.html" class="text-primary font-medium hover:text-primary/80 transition-colors">立即登录</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册成功提示 -->
    <div id="successToast" class="fixed bottom-5 right-5 bg-success text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 transform translate-y-20 opacity-0 transition-all duration-300">
        <i class="fa fa-check-circle"></i>
        <span>注册成功！正在跳转到登录页面...</span>
    </div>

    <!-- JavaScript -->
    <script>
        // 直接在页面加载时执行，不依赖DOMContentLoaded以避免与main.js冲突
        window.onload = function() {
            // 密码显示切换
            var togglePwdBtn = document.getElementById('togglePassword');
            var pwdInput = document.getElementById('password');
            
            if (togglePwdBtn && pwdInput) {
                togglePwdBtn.onclick = function() {
                    var type = pwdInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    pwdInput.setAttribute('type', type);
                    
                    // 切换图标
                    var icon = togglePwdBtn.querySelector('i');
                    icon.classList.toggle('fa-eye');
                    icon.classList.toggle('fa-eye-slash');
                };
            }
            
            // 密码强度检测
            var pwdStrengthBar = document.getElementById('passwordStrengthBar');
            var pwdStrengthText = document.getElementById('passwordStrengthText');
            
            if (pwdInput && pwdStrengthBar && pwdStrengthText) {
                pwdInput.oninput = function() {
                    var value = this.value;
                    var strength = 0;
                    var strengthText = '弱';
                    var strengthColor = '#F53F3F'; // 红色
                    
                    // 密码长度检查
                    if (value.length >= 8) strength += 1;
                    if (value.length >= 12) strength += 1;
                    
                    // 包含数字
                    if (/\d/.test(value)) strength += 1;
                    
                    // 包含小写字母
                    if (/[a-z]/.test(value)) strength += 1;
                    
                    // 包含大写字母
                    if (/[A-Z]/.test(value)) strength += 1;
                    
                    // 包含特殊字符
                    if (/[^A-Za-z0-9]/.test(value)) strength += 1;
                    
                    // 计算强度百分比
                    var strengthPercent = Math.min(100, Math.round((strength / 6) * 100));
                    
                    // 设置强度文本和颜色
                    if (strengthPercent === 0) {
                        strengthText = '未输入';
                        strengthColor = '#86909C';
                    } else if (strengthPercent <= 30) {
                        strengthText = '弱';
                        strengthColor = '#F53F3F';
                    } else if (strengthPercent <= 60) {
                        strengthText = '中';
                        strengthColor = '#FF7D00';
                    } else {
                        strengthText = '强';
                        strengthColor = '#00B42A';
                    }
                    
                    // 更新UI
                    pwdStrengthBar.style.width = strengthPercent + '%';
                    pwdStrengthBar.style.backgroundColor = strengthColor;
                    pwdStrengthText.textContent = '密码强度：' + strengthText;
                    pwdStrengthText.style.color = strengthColor;
                };
            }
            
            // 为注册表单添加自定义验证
            var regForm = document.getElementById('registerForm');
            var confirmPwd = document.getElementById('confirmPassword');
            var successToast = document.getElementById('successToast');
            var phoneInp = document.getElementById('phone');
            var fullnameInp = document.getElementById('fullname');
            
            if (regForm && confirmPwd && successToast && phoneInp && fullnameInp) {
                // 重写表单提交方法
                regForm.onsubmit = function(e) {
                    // 阻止默认提交
                    e.preventDefault();
                    
                    var isValid = true;
                    
                    // 验证真实姓名（仅允许中文字符）
                    var nameRegex = /^[\u4e00-\u9fa5]+$/;
                    if (!nameRegex.test(fullnameInp.value)) {
                        alert('请输入正确姓名');
                        fullnameInp.focus();
                        isValid = false;
                    }
                    
                    // 验证手机号码格式
                    var phoneRegex = /^1[3-9]\d{9}$/;
                    if (!phoneRegex.test(phoneInp.value)) {
                        alert('请输入正确的手机号');
                        phoneInp.focus();
                        isValid = false;
                    }
                    
                    // 验证密码是否一致
                    if (pwdInput.value !== confirmPwd.value) {
                        alert('两次输入的密码不一致');
                        isValid = false;
                    }
                    
                    if (isValid) {
                        // 收集表单数据
                        var formData = {
                            username: document.getElementById('username').value,
                            fullname: document.getElementById('fullname').value,
                            phone: document.getElementById('phone').value,
                            password: pwdInput.value
                        };
                        
                        console.log('注册信息:', formData);
                        
                        // 显示成功提示
                        successToast.classList.remove('translate-y-20', 'opacity-0');
                        successToast.classList.add('translate-y-0', 'opacity-100');
                        
                        // 2秒后跳转到登录页
                        setTimeout(function() {
                            window.location.href = 'login.html';
                        }, 2000);
                    }
                };
            }
            
            // 添加表单动画效果
            var inputs = document.querySelectorAll('.form-input');
            if (inputs) {
                for (var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    input.onfocus = function() {
                        this.parentElement.classList.add('scale-[1.02]');
                        this.parentElement.style.transition = 'transform 0.3s ease';
                    };
                    
                    input.onblur = function() {
                        this.parentElement.classList.remove('scale-[1.02]');
                    };
                }
            }
        };
    </script>
    <script src="js/main.js"></script>
</body>
</html>